<template>
    <div>
      <div class="main-tab">
        <x-header id="header" :left-options="{backText: ''}" class="top"><span class="tit">积分</span></x-header>
        <div class="jifen">
          <img src="../../../static/icon/jifen/jifen-2.png" alt="">
          <span class="point">总积分<span class="point-number">{{totalpoint}}</span>分</span>
        </div>
        <group>
          <cell-box v-for=" (item, index) in pointlist" :key="item.id">
            <div class="main">
              <div class="main-left">
                <span class="point-date">{{item.point_date}}<span class="point-date-hour">{{item.point_hour}}</span></span>
                <span class="point-event">{{item.point_title}}</span>
              </div>
              <div class="main-right">
                <span>+&nbsp;&nbsp;{{item.point_score}}</span>
              </div>
            </div>
          </cell-box>
        </group>
      </div>
    </div>
</template>

<script>
    export default {
        name: "points",
      data(){
          return{
            totalpoint:100,
            pointlist:[
              {
                id:0,
                point_date:'2018-12-31',
                point_hour:'08:00',
                point_title:'每日登录',
                point_score:2
              },
              {
                id:1,
                point_date:'2018-12-31',
                point_hour:'08:00',
                point_title:'评论',
                point_score:2
              },
              {
                id:2,
                point_date:'2018-12-31',
                point_hour:'08:00',
                point_title:'发帖',
                point_score:2
              },
            ]
          }
      }
    }
</script>

<style scoped>
  .top{
       background: #AD2532;
       box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
     }
  .tit{
    margin-top: 8px;
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.41px;
    text-align: center;
  }
  .jifen{
    padding-top:46.5px;
    background: #FFFFFF;
    width: 100%;
    height: 4.57rem;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .jifen img{
    width: 2.86rem;
    height: 2.43rem;
    margin-left: 7.43rem;
    margin-right: 1.42rem;
  }
  .point{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0.17px;
    text-align: justify;
  }
  .point-number{
    font-size: 20px;
    color: #F5A623;
    letter-spacing: 0.24px;
    text-align: justify;
    margin-left: 0.72rem;
  }
  .main{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .main-left{
    display: flex;
    flex-direction: column;
  }
  .point-date{
    display: block;
    font-size: 12px;
    color: #828282;
    letter-spacing: -0.29px;
    text-align: center;
  }
  .point-date-hour{
    margin-left: 0.36rem;
  }
  .point-event{
    font-family: "PingFangSC-Semibold",serif;
    display: block;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0.17px;
    text-align: justify;
    margin-top: 0.36rem;
  }
  .main-right{
    font-size: 18px;
    color: #F5A623;
    letter-spacing: -0.43px;
    text-align: center;
  }
</style>
